<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <!-- Content-Security-Policy 内容安全策略：策略指各种描述你的 CSP 策略指令的字符串，一个整体策略由一系列策略指令所组成，每个策略指令都描述了针对某个特定资源的类型以及策略生效的范围-->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    <!-- unsafe-inline 允许使用内联资源，例如内联 <script> 元素（javascript: URL）、内联事件处理器以及内联 <style> 元素。 -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'; script-src 'unsafe-inline'"> -->
    <title>你好!</title>
    <link rel="stylesheet" href="assets/css/index.css" />
    <script lang="text/javascript" src="assets/js/index.js"></script>
    <script lang="text/javascript" src="assets/js/global.js"></script>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', () => {
        console.log('domcontentloaded')
      })
      document.addEventListener('load', () => {
        console.log('load')
      })
    </script>
  </head>
  <body>
    <h1>你好!</h1>
    <p>
      我们正在使用 Node.js <span id="node-version"></span>,
      Chromium <span id="chrome-version"></span>,
      和 Electron <span id="electron-version"></span>.
    </p>
    <section class="module">
      <a href="./self.html">go to self page</a>
    </section>
    <!-- 读取象牙山三巨头案例 -->
    <section class="module">
      <button id="btn_xc">乡村爱情</button>
      <button id="btn_xc_gb">乡村爱情-关闭</button>
      <div id="xiangcunaiqing"></div>
    </section>
    <!-- 打开一个新窗口 -->
    <section class="module">
      <button onclick="newwindowClick()">打开一个新窗口</button>
    </section>
    <!-- 测试浏览器窗口通信 -->
    <section class="module">
      <button onclick="passMessageClick()">浏览器窗口通信</button>
    </section>
    <!-- 使用系统默认的浏览器打开一个链接 -->
    <section class="module">
      <button onclick="defaultBrowerOpenClick()">系统默认的浏览器打开一个链接</button>
    </section>
    <!-- 打开文件选择对话框 -->
    <section class="module">
      <button onclick="openFileDialogClick()">打开文件选择对话框</button>
    </section>
    <!-- 打开保存文件对话框 -->
    <section class="module">
      <button onclick="openSaveDialogClick()">打开保存文件对话框</button>
    </section>
    <!-- 使用 input 标签来选择文件跟保存文件功能，相当用 electron 的文件选择框跟文件保存框功能！ -->
    <section class="module">
      <input type="file" id="selectSaveFile" /><span>选择跟保存文件对话框</span>
    </section>
    <!-- 打开消息对话框 -->
    <section class="module">
      <button onclick="openMsgDialogClick()">打开消息对话框</button>
    </section>
    <!-- 底部消息通知 -->
    <section class="module">
      <button onclick="appMsgClick()">底部消息通知</button>
    </section>
    <!-- 使用剪贴板 -->
    <section class="module">
      <button onclick="clipboardClick()">点击复制右侧文本到剪贴板</button><span id="clipboardText" style="margin-left:20px;">clipboard is used to copy text !</span>
    </section>
  </body>
</html>